<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		{include file="public/_header" /}
	</head>
	<body>
		<body>
			<div class="x-nav">
				<span class="layui-breadcrumb">
					<a href="">首页</a>
					<a>
						<cite>回收站</cite></a>
				</span>
				<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
				 title="刷新">
					<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
			</div>
			<div class="layui-fluid">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md12">
						<div class="layui-card">
							<div class="layui-card-body ">
								<div class="div-item">
									<div class="btn-item">
										<button id="noticeBtn1" class="layui-btn">成功通知</button>
										<button id="noticeBtn2" class="layui-btn layui-btn-danger">错误通知</button>
									</div>
									<div class="btn-item">
										<button id="noticeBtn3" class="layui-btn layui-btn-warm">警告通知</button>
										<button id="noticeBtn4" class="layui-btn layui-btn-normal">信息通知</button>
									</div>
								</div>
								<div class="div-item">
									<div class="btn-item">
										<button id="noticeBtn5" class="layui-btn layui-btn-primary">成功提示</button>
										<button id="noticeBtn6" class="layui-btn layui-btn-primary">错误提示</button>
									</div>
									<div class="btn-item">
										<button id="noticeBtn7" class="layui-btn layui-btn-primary">警告提示</button>
										<button id="noticeBtn8" class="layui-btn layui-btn-primary">信息提示</button>
									</div>
								</div>
								<div class="div-item">
									<div class="btn-item">
										<button id="noticeBtn9" class="layui-btn layui-btn-primary">加载提示</button>
										<button id="noticeBtn10" class="layui-btn">普通通知</button>
									</div>
									<div class="btn-item">
										<button id="noticeBtn11" class="layui-btn">带图片通知</button>
										<button id="noticeBtn12" class="layui-btn">带按钮通知</button>
									</div>
								</div>
							

								<ul id="demoTree" class="dtree" data-id="0"></ul>
								<div class="layui-btn-group">
									<button class="layui-btn" id="btn-expand">全部展开</button>
									<button class="layui-btn" id="btn-fold">全部折叠</button>
									<button class="layui-btn" id="btn-refresh">刷新表格</button>
								</div>
								<script type="text/html" id="oper-col">
									<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
								    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
								</script>
								<table id="table1" class="layui-table" lay-filter="table1"></table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</body>
		
		<script type="text/javascript">
			layui.extend({
				notice: 'notice/notice',
				treetable: 'treetable/treetable',
				dtree: 'dtree/dtree' //以 regionSelect 组件为例，定义该组件模块名
			}).use(['dtree', 'layer', 'jquery', 'treetable', 'table', 'notice', 'form'], function() {
				var dtree = layui.dtree,
					layer = layui.layer,
					$ = layui.jquery;
				var table = layui.table;
				var treetable = layui.treetable;
				var notice = layui.notice;
				var form = layui.form;
				
				
				var data = [
				{"id":"001", "title": "湖南省", "last": false, "parentId": "0", 
				 "children":[
				    {"id":"001001", "title": "长沙市", "last":true, "parentId": "001"},
				    {"id":"001002", "title": "株洲市", "last":true, "parentId": "001"},
				    {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001"},
				    {"id":"001004", "title": "衡阳市", "last":true, "parentId": "001"},
				    {"id":"001005", "title": "郴州市", "last":true, "parentId": "001"}]},
				{"id":"002", "title": "湖北省", "last": false, "parentId": "0", 
				 "children":[
				    {"id":"002001", "title": "武汉市", "last":true, "parentId": "002"},
				    {"id":"002002", "title": "黄冈市", "last":true, "parentId": "002"},
				    {"id":"002003", "title": "潜江市", "last":true, "parentId": "002"},
				    {"id":"002004", "title": "荆州市", "last":true, "parentId": "002"},
				    {"id":"002005", "title": "襄阳市", "last":true, "parentId": "002"}]},
				{"id":"003", "title": "广东省", "last": false, "parentId": "0", 
				 "children":[
				    {"id":"003001", "title": "广州市", "last":false, "parentId": "003", 
				     "children":[
				      {"id":"003001001", "title": "天河区", "last":true, "parentId": "003001"},
				      {"id":"003001002", "title": "花都区", "last":true, "parentId": "003001"}]},
				    {"id":"003002", "title": "深圳市", "last":true, "parentId": "003"},
				    {"id":"003003", "title": "中山市", "last":true, "parentId": "003"},
				    {"id":"003004", "title": "东莞市", "last":true, "parentId": "003"},
				    {"id":"003005", "title": "珠海市", "last":true, "parentId": "003"},
				    {"id":"003006", "title": "韶关市", "last":true, "parentId": "003"}]},
				{"id":"004", "title": "浙江省", "last": false, "parentId": "0", 
				 "children":[
				    {"id":"004001", "title": "杭州市", "last":true, "parentId": "004"},
				    {"id":"004002", "title": "温州市", "last":true, "parentId": "004"},
				    {"id":"004003", "title": "绍兴市", "last":true, "parentId": "004"},
				    {"id":"004004", "title": "金华市", "last":true, "parentId": "004"},
				    {"id":"004005", "title": "义乌市", "last":true, "parentId": "004"}]},
				{"id":"005", "title": "福建省", "last": false, "parentId": "0", 
				 "children":[
				    {"id":"005001", "title": "厦门市", "last":true, "parentId": "005" }]
				}];
				// 初始化树
				var DemoTree = dtree.render({
					elem: "#demoTree",
					data: data,
					menubar:true,
					// 使用data加载
					//url: "../json/case/demoJson.json" // 使用url加载（可与data加载同时存在）
				});

				// 绑定节点点击
				dtree.on("node('demoTree')", function(obj) {
					layer.msg(JSON.stringify(obj.param));
				});
				// 渲染表格
				var renderTable = function() {
					layer.load(2);
					treetable.render({
						treeColIndex: 2, // treetable新增参数
						treeSpid: -1, // treetable新增参数
						treeIdName: 'd_id', // treetable新增参数
						treePidName: 'd_pid', // treetable新增参数
						treeDefaultClose: true, // treetable新增参数
						treeLinkage: true, // treetable新增参数
						elem: '#table1',
						data: [{
								"id": 1,
								"name": "xx",
								"sex": "male",
								"pid": -1,
								"width":80
							}, {
								"id": 2,
								"name": "xx",
								"sex": "male",
								"pid": 1
							},
							{
								"id": 2,
								"name": "xx",
								"sex": "male",
								"pid": 1
							},
							{
								"id": 2,
								"name": "xx",
								"sex": "male",
								"pid": 1
							},
							{
								"id": 2,
								"name": "xx",
								"sex": "male",
								"pid": 1
							},
							{
								"id": 2,
								"name": "xx",
								"sex": "male",
								"pid": 1
							},
							{
								"id": 2,
								"name": "xx",
								"sex": "male",
								"pid": 1
							},
							{
								"id": 2,
								"name": "xx",
								"sex": "male",
								"pid": 1
							}
						],
						cols: [
							[{
									type: 'numbers',
									width: 80
								},
								{
									field: 'id',
									title: 'id',
									width: 100
								},
								{
									field: 'name',
									title: 'name'
								},
								{
									field: 'sex',
									title: 'sex'
								},
								{
									field: 'pid',
									title: 'pid'
								},
								{
									templet: '#oper-col',
									title: 'oper'
								}
							]
						],
						done: function() {
							layer.closeAll('loading');
						}
					});
				}
				renderTable();
				$('#btn-expand').click(function() {
					treetable.expandAll('#table1');
				});

				$('#btn-fold').click(function() {
					treetable.foldAll('#table1');
				});

				$('#btn-refresh').click(function() {
					renderTable();
				});

				//监听工具条
				table.on('tool(table1)', function(obj) {
					var data = obj.data;
					var layEvent = obj.event;

					if (layEvent === 'del') {
						layer.msg('删除' + data.id);
					} else if (layEvent === 'edit') {
						layer.msg('修改' + data.id);
					}
				});


				$('#noticeBtn1').click(function() {
					notice.success({
						title: '消息通知',
						message: '你有新的消息，请注意查收!'
					});
				});
				$('#noticeBtn2').click(function() {
					notice.error({
						title: '消息通知',
						message: '你有新的消息，请注意查收!'
					});
				});
				$('#noticeBtn3').click(function() {
					notice.warning({
						title: '消息通知',
						message: '你有新的消息，请注意查收!'
					});
				});
				$('#noticeBtn4').click(function() {
					notice.info({
						title: '消息通知',
						message: '你有新的消息，请注意查收!'
					});
				});
				$('#noticeBtn5').click(function() {
					notice.msg('This is a message of success', {
						icon: 1
					});
				});
				$('#noticeBtn6').click(function() {
					notice.msg('This is a message of error', {
						icon: 2
					});
				});
				$('#noticeBtn7').click(function() {
					notice.msg('This is message of warning', {
						icon: 3
					});
				});
				$('#noticeBtn8').click(function() {
					notice.msg('This is message of info', {
						icon: 5
					});
				});
				$('#noticeBtn9').click(function() {
					notice.msg('Action in progress..', {
						icon: 4,
						close: true
					});
				});
				$('#noticeBtn10').click(function() {
					notice.show({
						title: '消息通知',
						message: '你有新的消息，请注意查收!'
					});
				});
				$('#noticeBtn11').click(function() {
					notice.show({
						/*image: '../../assets/images/logo.png',*/
						image: 'https://pic.qqtn.com/up/2018-9/15367146917869444.jpg',
						imageWidth: 71,
						title: '消息通知',
						message: '你有新的消息，请注意查收!'
					});
				});
				$('#noticeBtn12').click(function() {
					notice.info({
						title: '消息通知',
						message: '你有新的消息，请注意查收!',
						timeout: false,
						buttons: [
							['<button>Btn1</button>', function() {
								notice.msg('点击了按钮一', {
									icon: 5
								});
							}],
							['<button>Btn2</button>', function() {
								notice.msg('点击了按钮二', {
									icon: 5
								});
							}]
						]
					});
				});

				// 自定义参数
				form.on('submit(noticeFormSubmit)', function(data) {
					for (var f in data.field) {
						if (data.field[f] == 'false' || data.field == 'true') {
							data.field[f] = eval(data.field[f]);
						}
					}
					data.field.title = '消息通知';
					data.field.message = '你有新的消息，请注意查收!';
					notice[data.field.noticeType](data.field);
					return false;
				});
				// 关闭全部
				$('#noticeBtnClose').click(function() {
					notice.destroy();
				});
			});
		</script>
	</body>
</html>
